<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script type="text/babel">
    class ChildComp extends React.Component{
      componentWillReceiveProps(){
        console.log('参数更新了');
      }
      render(){
        return <span>{this.props.name}</span>;
      }
    }
    class ParentComp extends React.Component{
      constructor(...args){
        super(...args);
        this.state={i: 0};
      }
      fn(){
        this.setState({
          i: this.state.i+1
        });
      }
      render(){
        return <div>
          <input type="button" value="aaa" onClick={this.fn.bind(this)}/>
          <ChildComp name={this.state.i} />
        </div>;
      }
    }

    window.onload=function (){
      var oDiv=document.getElementById('div1');

      ReactDOM.render(
        <ParentComp/>,
        oDiv
      );
    };
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>
